<!-- 挖矿linux -->
<template>

  <div class="pag" ref="pag">
    <div class="banner">
      <div class="b-title">
        <img src="~assets/images/miningboard/linux.png" alt="">
        <div>
          <p>Linux挖矿数据看板</p>
          <div @click="showGraphic(pcRule)">查看规则</div>
        </div>
      </div>
    </div>
    <div class="no-result-wrapper" v-if="noResult">
      <div class="no-result">
        <img src="~assets/images/miningboard/unstarted.png" alt="">
        <h3>尚未开启linux挖矿</h3>
      </div>
    </div>
    <div class="data-board" v-if="list.length">
      <div class="data-head">
        <div>
          <p>令牌质押数量</p>
          <div>{{tokenNum | numAddSepFixed}}</div>
        </div>
        <p class="s-split"></p>
        <div>
          <p>挖矿节点/绑定节点</p>
          <div>{{routerMiningCount}}/{{routerCount}}</div>
        </div>
<!--        <p class="s-split"></p>-->
<!--        <div>-->
<!--          <p>单个节点质押</p>-->
<!--          <div v-if="averageDeposit >= 3000" style="color:#00A989;">{{averageDeposit | numAddSepFixed}}</div><div class="unmatched" v-else>{{averageDeposit | numAddSepFixed}}<span>(未满足)</span></div>-->
<!--        </div>-->
      </div>
      <div class="data-body">
        <div class="data-row">
          <div class="data-cell">
            <p>今日预计收益</p>
            <div>0CVNT</div>
            <!-- 按产品要求更改 <div>{{todayCvnt}}CVNT</div>-->
          </div>
          <div class="data-cell">
            <p>今日贡献流量</p>
            <div>{{todayUpload}}</div>
          </div>
        </div>
        <div class="data-row">
          <div class="data-cell">
            <p>累积获得</p>
            <div>{{routerCvnt}}CVNT</div>
          </div>
          <div class="data-cell">
            <p>累积贡献</p>
            <div>{{totalUpload}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="node-list" v-if="list.length">
      <div class="node-head">
        <h3>节点列表<img src="~assets/images/miningboard/fq.png" alt="" @click="showGraphic(pcGraphic)"></h3>
        <p>*若单个节点在线时长低于{{onlineTime}}小时则没有收益不按预计获得发放</p>
      </div>
      <div class="node-body">
        <div class="tb-head">
          <div class="tb-cell">序号</div>
          <div class="tb-cell">设备名称</div>
          <div class="tb-cell">今日贡<br>献流量</div>
          <div class="tb-cell">
            今日预<br>计获得
          </div>
          <div class="tb-cell">今日在<br>线时长</div>
        </div>
        <div class="tb-body">
          <div class="tb-row" @click="goDetail(item)" v-for="(item, index) in list">
            <div class="tb-cell">{{ routerCount - index }}</div>
            <div class="tb-cell">
              <div>
                <p>{{item.name}}</p>
                <div v-if="item.status == 0" class="tag danger">未开启</div>
                <div v-if="item.status == 1" class="tag success">运行中</div>
                <div v-if="item.status == 2" class="tag warning">审核中</div>
                <div v-if="item.status == 3" class="tag info">已停止</div>
              </div>
            </div>
            <div class="tb-cell">{{item.up}}</div>
            <div class="tb-cell">{{item.cvnt | numAddSepFixed2}}CVNT</div>
            <div class="tb-cell" :class="{ok: item.onlineTime >= onlineTime, no: item.onlineTime < onlineTime}"><span>{{item.onlineTime}}h</span></div>
          </div>
        </div>
      </div>
    </div>
    <cube-loading class="list-loading" :class="{hide: !isListLoading}"></cube-loading>
  </div>

</template>

<script>
    import {miningInfo, miningRouterList} from 'api/register';

    export default {
        data() {
            return {
                noResult: false,
                isListLoading: false,
                list: [],
                pcGraphic: require('assets/images/miningboard/linux-graphic.png'),
                pcRule: require('assets/images/miningboard/linux-rule.png'),
                onlineTime: 20,
                tokenNum: 0,
                pledgeCvnt: '0',
                routerCount: '0',
                routerCvnt: '--',
                routerMiningCount: '--',
                todayCvnt: '--',
                todayUpload: '--',
                totalUpload: '--',
                averageDeposit: 0,
                source: 2
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                Object.assign(vm, to.query)
                //vm.list = []
                vm.getData()
                vm.onPullup()
                if(!vm.list.length){
                    vm.$loading()
                }
            })
        },
        mounted(){
            this.$eventBus.$on('onPullup', (index)=>{
                //console.log(index)
                if(index == 2){
                    this.onPullup()
                }
            })



        },
        methods: {
            async onPullup(){
                let me = this
                let {uid, token} = this
                if(this.isListLoading){
                    return
                }
                let pageSize = 20

                if(this.list.length < pageSize){
                    await this.miningRouterList()
                    this.isListLoading = false
                    return
                }
                this.isListLoading = true
                // this.list.length > 50
                let pagec = Math.floor((this.list.length - pageSize) / pageSize) + 1
                let pagey = (this.list.length - pageSize) % pageSize

                try {
                    let {data} = await miningRouterList(uid, token, this.source, pageSize, 1 + pagec)
                    this.isListLoading = false
                    if(data){
                        if(pagey){
                            data.splice(0, pagey)
                        }
                        me.list = me.list.concat(data)
                    }
                }catch (e) {
                    this.$warn(e.info)
                    this.isListLoading = false
                }

            },
            goDetail(item){
                this.$router.push({path: '/nodeDetail', query: {
                        nodeId: item.nodeId,
                        status: item.status,
                        uid: this.uid,
                        token: this.token,
                        path: 'linux'
                    }});
            },
            showGraphic(url){
                this.$parent.showGraphic(url)
            },
            async getData() {
                let {uid, token} = this
                let {data} = await miningInfo( uid, token, this.source)
                Object.assign(this, data)
                if (data.routerMiningCount == 0) {
                    this.averageDeposit = 0;
                } else {
                    this.averageDeposit = (Number(this.pledgeCvnt) / Number(this.routerMiningCount)).toFixed(2);
                }
            },
            async miningRouterList() {
                let {uid, token} = this
                try {
                    let {data} = await miningRouterList(uid, token, this.source, 20 , 1)
                    if (data) {
                        this.list = data
                    }else{
                        this.noResult = true
                    }
                    this.$loadingHide()
                    return data
                } catch (e) {
                    this.$loadingHide()
                    this.$warn(e.info || '请求超时')
                }
            },
        }
    }
</script>


<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {

  }

  .banner {
    height:358px;
    background:linear-gradient(210deg,rgba(171,133,254,1) 0%,rgba(121,94,255,1) 100%);
  }




</style>
















